<!--
 * @Author: N0ts
 * @Date: 2021-05-11 19:32:17
 * @LastEditTime: 2021-10-07 17:32:01
 * @Description: 记仇小本本
 * @FilePath: \heng\index.html
 * @Mail：mail@n0ts.cn
-->

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>记仇小本本</title>
    <meta name="description" content="网站介绍">
    <meta name="keywords" content="关键词">
    <link rel="icon" href="https://n0ts.gitee.io/lovexhjto520/favicon.ico">
    <link href="https://cdn.bootcdn.net/ajax/libs/wangEditor/3.1.1/wangEditor.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.1/theme-chalk/index.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/viewerjs/1.9.0/viewer.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="./css/lovexhj.css">
</head>

<body>
    <div id="lovexhj" v-cloak>
        <!-- 加载页面 -->
        <div class="lovexhjLoading" v-if="jsonConfig">
            <div>
                <!-- 猪鼻子 -->
                <div class="xhj"></div>
                <!-- 加载文字 -->
                <div class="xhjText">{{jsonConfig.lovexhj.loadingText}}</div>
            </div>
        </div>
        <div v-if="jsonConfig">
            <!-- 顶部菜单栏 -->
            <div class="lovexhjHeader">
                <p>{{jsonConfig.lovexhj.lovexhjHeader.title}}</p>
            </div>
            <!-- 主体框架 -->
            <div class="lovexhjBody">
                <!-- 移动框架 -->
                <div class="lovexhjBookMove" ref="lovexhjBookMove">
                    <!-- 内容框架 -->
                    <div class="lovexhjIndex">
                        <!-- 书本 -->
                        <div class="lovexhjBook">
                            <!-- 白色底层 -->
                            <div class="lovexhjBookWhiteBg"></div>
                            <!-- 封面 -->
                            <div class="lovexhjBookFm" @click="fmOpen" ref="lovexhjBookFm">
                                <p>{{jsonConfig.lovexhj.lovexhjHeader.bookTitle}}</p>
                            </div>
                            <!-- 目录页 -->
                            <div class="lovexhjBookList" v-infinite-scroll="lazyLoadList"
                                infinite-scroll-distance="1" infinite-scroll-delay="500"
                                :infinite-scroll-disabled="loadMore" ref="lovexhjBookList">
                                <p class="lovexhjBookListTitle">{{jsonConfig.lovexhj.pageTitle}}</p>
                                <p class="lovexhjBookListTime">{{jsonConfig.lovexhj.pageSubTitle}}</p>
                                <div class="lovexhjBookListItem" v-for="(item, index) in wdnmdData" :key="index"
                                    @click="selectWdnmd(index)">
                                    <p>....................................................</p>
                                    <span>{{item.title[1]}}</span>
                                    <span>{{item.created_at}}</span>
                                </div>
                                <div class="lovexhjBookListItem lovexhjBookListLoad" v-if="!loadMore">加载中</div>
                                <div class="lovexhjBookListItem lovexhjBookListLoad" v-else>没有仇啦已经！</div>
                            </div>
                            <div class="lovexhjBookList" v-else>
                                <p class="lovexhjBookListNone">{{jsonConfig.lovexhj.pageNone}}</p>
                            </div>
                            <!-- 目录页背部 -->
                            <div class="lovexhjBookListBg" @click="ListOpen" ref="lovexhjBookListBg"></div>
                            <!-- 内容页 -->
                            <div class="lovexhjBookContent" v-if="wdnmdData">
                                <div>
                                    <p class="lovexhjBookListTitle">{{wdnmdData[wdnmdIndex].title[1]}}</p>
                                    <p class="lovexhjBookListTime">
                                        <i class="fa fa-user-o">&nbsp;{{wdnmdData[wdnmdIndex].title[0]}}</i>
                                        <i class="fa fa-calendar">&nbsp;{{wdnmdData[wdnmdIndex].created_at}}</i>
                                    </p>
                                    <p class="lovexhjBookListContext" v-html="wdnmdData[wdnmdIndex].body"></p>
                                </div>
                            </div>
                        </div>
                        <!-- 记仇跳转 -->
                        <div class="lovexhjToButton" @click="move">{{jsonConfig.lovexhj.wdnmdTextButton[0]}}</div>
                    </div>
                    <div class="lovexhjIndex">
                        <!-- 记仇 -->
                        <div class="editWdnmd" v-loading="wdnmdLoading">
                            <!-- 记仇标题 -->
                            <div class="editWdnmdTitle">
                                <input class="editWdnmdTitleInput" type="text" v-model="title"
                                    :placeholder="jsonConfig.lovexhj.wdnmdPlaceholder">
                                <el-select placeholder="你是？" v-model="sexSelect">
                                    <el-option v-for="(item, index) in jsonConfig.lovexhj.identity" :key="index"
                                        :lable="item.name" :value="item.name">
                                        <span>{{ item.name }}</span>
                                        <span class="identityColor" :style="'background-color:' + item.color"></span>
                                    </el-option>
                                </el-select>
                            </div>
                            <!-- 富文本 -->
                            <div id="ed"></div>
                            <!-- 记个仇 -->
                            <div class="wdnmdsubmit" @click="wdnmdSubmit">{{jsonConfig.lovexhj.wdnmdSubmit}}</div>
                        </div>

                        <!-- 记仇跳转 -->
                        <div class="lovexhjToButton" @click="move">{{jsonConfig.lovexhj.wdnmdTextButton[1]}}</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 密码输入 -->
        <el-dialog :title="jsonConfig.lovexhj.passwordTitle" :visible.sync="pswForm" append-to-body="true"
            v-if="jsonConfig">
            <input type="password" v-model="password" class="lovexhjInputPsw" placeholder="输入密码丫！">
            <div slot="footer" class="dialog-footer">
                <el-button @click="setPsw(false)">取 消</el-button>
                <el-button type="primary" @click="setPsw(true)">确 定</el-button>
            </div>
        </el-dialog>
    </div>

    <!-- js 引用 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/wangeditor@latest/dist/wangEditor.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.1/index.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/viewerjs/1.9.0/viewer.min.js"></script>
    <script src="./js/lovexhj.js" type="module"></script>
</body>

</html>